import React, { useState, useEffect, useCallback } from 'react';
import { 
    getLsCarLogoQueryCarLogo,
    getLsCarLogoPublishLogo,
    getLsCarLogoDeleteCarLogo,
    getLsCarLogoCancelPublish
} from '../../api';
import AddLogModule from './components/AddLogModule';
import { LogListAll } from './style';
import {
    PageHeader,
    Button,
    message,
    Table,
    Image,
    Space,
    Modal
} from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal;


/**
 * @description: banne图 列表
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-08-10） 创建
 * @updata: xiaoxujs（2021-09-29） 完善页面
 */

const LogList = () => {
    const [listData, setListData] = useState([]); //列表
    const [addLogModuleShow, setAddLogModuleShow] = useState(false)
    const listFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getLsCarLogoQueryCarLogo();
                if (code === '20000') {
                    setListData(data)
                } else {
                    message.error(msg)
                }
            })()
        },
        [],
    )
    useEffect(() => {
        listFun()
    }, [listFun])
    //添加log弹窗
    const handleAddLog = () => {
        setAddLogModuleShow(true)
    }
        //发布log
        const handleRelease = id => {
            confirm({
                title: '确定要发布当前log吗?',
                icon: <ExclamationCircleOutlined />,
                onOk() {
                    ; (async () => {
                        const { code, msg } = await getLsCarLogoPublishLogo({ logoId:id });
                        if (code === '20000') {
                            message.success('发布成功！')
                            listFun()
                        } else {
                            message.error(msg)
                        }
                    })()
                }
            });
        }
            //删除log
    const handleDelete = id => {
        confirm({
            title: '确定要删除当前log吗?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                ; (async () => {
                    const { code, msg } = await getLsCarLogoDeleteCarLogo({ logoId: id });
                    if (code === '20000') {
                        message.success('删除成功！')
                        listFun()
                    } else {
                        message.error(msg)
                    }
                })()
            }
        });
    }
        //取消log
        const handleDeleteRelease = id => {
            confirm({
                title: '确定要取消当前log吗?',
                icon: <ExclamationCircleOutlined />,
                onOk() {
                    ; (async () => {
                        const { code, msg } = await getLsCarLogoCancelPublish({ logoId:id });
                        if (code === '20000') {
                            message.success('取消成功！')
                            listFun()
                        } else {
                            message.error(msg)
                        }
                    })()
                }
            });
        }
    const columns = [
        {
            title: '内容',
            dataIndex: 'value',
            render: text => <Image
                width={50}
                src={text}
            />
        },
        {
            title: '添加日期',
            dataIndex: 'createTime'
        },
        {
            title: '是否发布',
            dataIndex: 'isUse',
            render: (text) => <span>

                {
                    !text ? "发布" : "未发布"
                }
            </span>
        },

        {
            title: '操作',
            render: (text, recode) => <Space>
                {
                    recode.isUse ? <>
                        <Button type='primary' onClick={() => handleRelease(recode.id)}>发布</Button>
                        <Button type='primary' onClick={() => handleDelete(recode.id)} danger>删除 </Button>
                    </> : <Button type='primary' onClick={() => handleDeleteRelease(recode.id)} danger>取消发布</Button>
                }
            </Space>
        },
    ];
    return <LogListAll>
        <PageHeader
            className="site-page-header"
            title="公告管理"
            extra={[
                <Button key="1" type="primary" onClick={() => handleAddLog()}>
                    添加log
                </Button>,
            ]}
        />
        <Table dataSource={listData} columns={columns} rowKey='id' pagination={false} />
        <AddLogModule
            setAddLogModuleShow={setAddLogModuleShow}
            addLogModuleShow={addLogModuleShow}
            listFun={listFun}
        />
    </LogListAll>
}

export default LogList